<template>

  <mt-tabbar v-model="selected">
    <!-- @click="goHome" -->
    <mt-tab-item id="home" @click.native="goHome">
      <img v-if="this.selected == 'home' "  slot="icon" src="../../assets/icon/homed.png">
      <img v-else slot="icon" src="../../assets/icon/home.png">
      首页
    </mt-tab-item>
    <mt-tab-item id="manage" @click.native="goManage">
      <img v-if="this.selected == 'manage' "  slot="icon" src="../../assets/icon/managed.png">
      <img v-else slot="icon" src="../../assets/icon/manage.png">
      管理
    </mt-tab-item>
    <!-- v-tap="{methods:goFinance}" -->
    <mt-tab-item id="finance" @click.native="goFinance">
      <img v-if="this.selected == 'finance' "  slot="icon" src="../../assets/icon/financed.png">
      <img v-else slot="icon" src="../../assets/icon/finance.png">
      财务
    </mt-tab-item>
    <mt-tab-item id="active" @click.native="goActive">
      <img v-if="this.selected == 'active' "  slot="icon" src="../../assets/icon/actived.png">
      <img v-else slot="icon" src="../../assets/icon/active.png">
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>

<script>
  export default {
      data(){
        return {
          selected:"",
          title:""
        }
      },
      created(){
        this.selected = this.$route.name;
      },
      methods:{
        goHome(){
          if(this.$route.name !== 'home'){
            this.$router.push({ name: 'home', params: { titles: '首页' }})

          }
        },
        goManage(){
          if(this.$route.name !== 'manage'){
            this.$router.push({ name: 'manage', params: { titles: '管理' }})
          }
        },
        goActive(){
          if(this.$route.name !== 'active'){
            this.$router.push({ name: 'active', params: { titles: '我的' }})
          }
        },
        goFinance(){
          if(this.$route.name !== 'finance'){
            this.$router.push({ name: 'finance', params: { titles: '财务' }})
          }
        }
      }
  }
</script>

<style scoped>
.mint-tabbar{position: fixed;}
</style>
